<!-- 数据导入弹框组件 -->
<template>
    <el-dialog v-model="dialogVisible" @close="cancleUpload" title="导入数据" width="600px">
        <div class="downloadModel">
            下载导入模板<span @click="importTemplate">{{ downloadFileName }}</span>
        </div>
        <el-upload
            ref="uploadRef"
            v-model:file-list.sync="fileList"
            :action="uploadFileUrl"
            :data="{type:importType}"
            :before-upload="beforeUpload"
            :before-remove="beforeRemove"
            :on-success="uploadSuccess"
            :on-error="uploadError"
            :headers="headers"
            :multiple="false"
            :limit="1"
            :auto-upload="false"
        >
            <el-button type="primary" class="icon-Angle-upload">选择本地文件</el-button>
        </el-upload>
        <template #footer>
            <span class="dialog-footer">
                <el-button size="default" plain @click="cancleUpload">取 消</el-button>
                <el-button size="default" type="primary" @click="submitUpload">确定上传？</el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script setup>
import { ref, onMounted, reactive } from 'vue'
// 获取token
import { getToken } from "@/utils/auth";

// 获取当前实例
const { proxy } = getCurrentInstance();
// 上传成功回调
const emit = defineEmits(['update:modelValue', 'importSuccess']);
// 接口根路径
const baseURL = import.meta.env.VITE_APP_BASE_API;
// 设置token
const headers = ref({ token: "token " + getToken() });

// 接收父组件传参
const props = defineProps({
    // 显示弹框
    modelValue: {
        type: Boolean,
        required: false,
        default: () => false,
    },
    // 下载模板名称
    downloadFileName: {
        type: String,
        required: false,
        default: () => '建筑物易损性导入模板.xlsx',
    },
    // 上传接口
    uploadUrl: {
        type: String,
        required: false,
        default: () => '/ysx/uploadYsxExcel',
    },
});

// 模板下载
function importTemplate() {
    proxy.download("/base/product/downloadExcel", {
        fileName: props.downloadFileName
    }, props.downloadFileName);
};

// 文件上传对象
const uploadRef = ref();
// 显示弹框
const dialogVisible = ref(props.modelValue);
// 关闭上传弹框
const cancleUpload = () => {
    dialogVisible.value = false;
    emit('update:modelValue', false);
}
// 提交上传
const submitUpload = (res) => {
    uploadRef.value.submit();
}

//文件上传
const uploadFileUrl = ref(baseURL + props.uploadUrl); //上传地址
const fileList = ref([]); //上传文件列表
// 删除附件前回调
const beforeRemove = () => {
    fileList.value = [];
};
// 上传前回调
const beforeUpload = (file) => {
    const fileSize = file.size / 1024 / 1024;
    if (fileSize > 200) {
        $message.error('文件大小不能超过200M!');
        return false;
    }
    const fileReg = /.xls|.xlsx/;
    if (!fileReg.test(file.name)) {
        $message.error('请选择.xls .xlsx格式文件');
        return false;
    }
    // 导入等待提示动画
    proxy.$modal.loading('数据导入中,请耐心等待！');
    return true;
};
// 上传成功回调
const uploadSuccess = (response, uploadFile, uploadFiles) => {
    // 关闭提示动画
	proxy.$modal.closeLoading();
    if (response.code === 200) {
        proxy.$modal.msgSuccess("上传文件成功");
        dialogVisible.value = false;
        emit('update:modelValue', false);
        // 调用父组件方法
        emit("importSuccess", response, uploadFile, uploadFiles);
    } else {
        proxy.$modal.msgError(response.message||"导入失败，请检查检查模板是否正确！");
    }
}
// 上传失败回调
const uploadError = (err, uploadFile, uploadFiles) => {
    // 关闭提示动画
	proxy.$modal.closeLoading();
    proxy.$modal.msgError(err.message||"导入失败，请检查检查模板是否正确！");
}
</script>

<style lang="scss">
.downloadModel {
    font-size: 16px;
    line-height: 60px;
    span {
        color: var(--el-color-primary);
        cursor: pointer;
    }
}
</style>